<template>
    <div class="product-order-detail-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>商品订单详情</h2>
                </div>
                <div class="header-right">
                    <el-button @click="handleBack">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 详情内容 -->
        <div class="detail-content">
            <el-card shadow="never" class="detail-card">
                <!-- 订单信息、商家类型、下单人信息 -->
                <div class="info-section">
                    <div class="info-grid">
                        <!-- 订单信息 -->
                        <div class="info-item">
                            <h3>订单信息</h3>
                            <div class="info-content">
                                <div class="info-row">
                                    <span class="label">订单ID:</span>
                                    <span class="value">{{ orderDetail.orderId }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">订单状态:</span>
                                    <el-tag 
                                        :type="getStatusType(orderDetail.orderStatus)"
                                        size="small"
                                    >
                                        {{ orderDetail.orderStatus }}
                                    </el-tag>
                                </div>
                                <div class="info-row">
                                    <span class="label">创建时间:</span>
                                    <span class="value">{{ orderDetail.createTime }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">备注:</span>
                                    <span class="value">{{ orderDetail.remark || '' }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- 商家类型 -->
                        <div class="info-item">
                            <h3>商家类型</h3>
                            <div class="info-content">
                                <div class="info-row">
                                    <span class="label">商家类型:</span>
                                    <span class="value">{{ orderDetail.merchantType }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">支付单号:</span>
                                    <span class="value">{{ orderDetail.paymentNumber || '' }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">支付方式:</span>
                                    <span class="value">{{ orderDetail.paymentMethod }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">支付时间:</span>
                                    <span class="value">{{ orderDetail.paymentTime || '' }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- 下单人信息 -->
                        <div class="info-item">
                            <h3>下单人信息</h3>
                            <div class="info-content">
                                <div class="info-row">
                                    <span class="label">下单账户:</span>
                                    <span class="value">{{ orderDetail.ordererAccount }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">历史订单总数:</span>
                                    <span class="value">{{ orderDetail.totalOrders }}个</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">下单备注:</span>
                                    <span class="value">{{ orderDetail.orderRemark || '' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 商品信息 -->
                <div class="product-section">
                    <h3>商品信息</h3>
                    <div class="product-info">
                        <div class="product-summary">
                            <div class="summary-row">
                                <span class="label">商品总价:</span>
                                <span class="value">¥{{ orderDetail.totalPrice }}</span>
                            </div>
                            <div class="summary-row">
                                <span class="label">物流费用:</span>
                                <span class="value">¥{{ orderDetail.shippingFee }}</span>
                            </div>
                        </div>
                        <div class="product-item">
                            <div class="item-image">
                                <div class="product-icon">
                                    <div class="product-placeholder"></div>
                                </div>
                            </div>
                            <div class="item-details">
                                <div class="item-name">{{ orderDetail.productName }}</div>
                                <div class="item-price">
                                    <span class="label">单价</span>
                                    <span class="value">{{ orderDetail.unitPrice }}</span>
                                </div>
                                <div class="item-quantity">
                                    <span class="label">数量</span>
                                    <span class="value">x {{ orderDetail.quantity }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="payment-amount">
                            <span class="label">支付金额:</span>
                            <span class="value">¥{{ orderDetail.paymentAmount }}</span>
                        </div>
                    </div>
                </div>

                <!-- 物流信息和收货信息 -->
                <div class="logistics-section">
                    <div class="logistics-grid">
                        <!-- 物流信息 -->
                        <div class="logistics-item">
                            <h3>物流信息</h3>
                            <div class="logistics-content">
                                <!-- 待付款状态：不显示物流信息 -->
                                <div v-if="orderDetail.orderStatus === '待付款'" class="no-logistics">
                                    <span class="no-info">暂无物流信息</span>
                                </div>
                                
                                <!-- 待发货状态：显示发货按钮 -->
                                <div v-else-if="orderDetail.orderStatus === '待发货'" class="ship-section">
                                    <el-button type="primary" @click="showShipDialog">发货</el-button>
                                </div>
                                
                                <!-- 已收货和已完成状态：显示物流信息 -->
                                <div v-else class="logistics-info">
                                    <div class="logistics-row">
                                        <span class="label">物流公司:</span>
                                        <span class="value">{{ orderDetail.shippingCompany }}</span>
                                    </div>
                                    <div class="logistics-row">
                                        <span class="label">运单号:</span>
                                        <span class="value">{{ orderDetail.trackingNumber }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 收货信息 -->
                        <div class="recipient-item">
                            <h3>收货信息</h3>
                            <div class="recipient-content">
                                <div class="recipient-row">
                                    <span class="label">姓名:</span>
                                    <span class="value">{{ orderDetail.recipientName }}</span>
                                </div>
                                <div class="recipient-row">
                                    <span class="label">手机号:</span>
                                    <span class="value">{{ orderDetail.recipientPhone }}</span>
                                </div>
                                <div class="recipient-row">
                                    <span class="label">地址:</span>
                                    <span class="value">{{ orderDetail.recipientAddress }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 发货弹窗 -->
        <el-dialog
            v-model="shipDialogVisible"
            title="发货"
            width="500px"
            :before-close="handleShipDialogClose"
        >
            <el-form :model="shipForm" :rules="shipRules" ref="shipFormRef" label-width="100px">
                <el-form-item label="物流公司:" prop="shippingCompany">
                    <el-select 
                        v-model="shipForm.shippingCompany" 
                        placeholder="请选择物流公司"
                        style="width: 100%"
                    >
                        <el-option label="中通快递" value="中通快递" />
                        <el-option label="圆通快递" value="圆通快递" />
                        <el-option label="申通快递" value="申通快递" />
                        <el-option label="韵达快递" value="韵达快递" />
                        <el-option label="顺丰快递" value="顺丰快递" />
                        <el-option label="京东物流" value="京东物流" />
                    </el-select>
                </el-form-item>
                <el-form-item label="运单号:" prop="trackingNumber">
                    <el-input 
                        v-model="shipForm.trackingNumber" 
                        placeholder="请输入运单号"
                        clearable
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleShipDialogClose">取消</el-button>
                    <el-button type="primary" @click="handleShipConfirm" :loading="shipLoading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';

const route = useRoute();
const router = useRouter();

const id = route.params.id as string;

// 订单详情数据
const orderDetail = ref({
    orderId: '253',
    orderStatus: '待付款',
    createTime: '2025-07-09 20:20:13',
    remark: '',
    merchantType: '商家名称',
    paymentNumber: '',
    paymentMethod: '余额支付',
    paymentTime: '',
    ordererAccount: 'MJ1489',
    totalOrders: 45,
    orderRemark: '',
    totalPrice: 1,
    shippingFee: 0,
    productName: '测试商品005',
    unitPrice: '20.00',
    quantity: 1,
    paymentAmount: 1,
    shippingCompany: '',
    trackingNumber: '',
    recipientName: '吴老师',
    recipientPhone: '15774165848',
    recipientAddress: '天津市-天津市-和平区 小白楼街道1'
});

// 发货弹窗相关
const shipDialogVisible = ref(false);
const shipLoading = ref(false);
const shipFormRef = ref<FormInstance>();

// 发货表单
const shipForm = reactive({
    shippingCompany: '',
    trackingNumber: ''
});

// 发货表单验证规则
const shipRules: FormRules = {
    shippingCompany: [
        { required: true, message: '请选择物流公司', trigger: 'change' }
    ],
    trackingNumber: [
        { required: true, message: '请输入运单号', trigger: 'blur' }
    ]
};

// 返回操作
const handleBack = () => {
    router.push('/product-order-list');
};

// 获取状态类型
const getStatusType = (status: string) => {
    switch (status) {
        case '待付款':
            return 'warning';
        case '待发货':
            return 'info';
        case '已收货':
            return 'success';
        case '已完成':
            return 'success';
        default:
            return 'info';
    }
};

// 显示发货弹窗
const showShipDialog = () => {
    shipDialogVisible.value = true;
    // 重置表单
    shipForm.shippingCompany = '';
    shipForm.trackingNumber = '';
};

// 关闭发货弹窗
const handleShipDialogClose = () => {
    shipDialogVisible.value = false;
    // 重置表单
    if (shipFormRef.value) {
        shipFormRef.value.resetFields();
    }
};

// 确认发货
const handleShipConfirm = async () => {
    if (!shipFormRef.value) return;
    
    try {
        await shipFormRef.value.validate();
        shipLoading.value = true;
        
        // 模拟发货API调用
        setTimeout(() => {
            // 更新订单状态和物流信息
            orderDetail.value.orderStatus = '已收货';
            orderDetail.value.shippingCompany = shipForm.shippingCompany;
            orderDetail.value.trackingNumber = shipForm.trackingNumber;
            
            shipLoading.value = false;
            shipDialogVisible.value = false;
            ElMessage.success('发货成功');
            
            // 重置表单
            if (shipFormRef.value) {
                shipFormRef.value.resetFields();
            }
        }, 1000);
    } catch (error) {
        console.log('表单验证失败:', error);
    }
};

// 页面初始化
onMounted(() => {
    // 加载订单详情数据
    loadOrderDetail(id);
});

// 加载订单详情
const loadOrderDetail = (orderId: string) => {
    // 模拟加载数据，根据订单ID设置不同状态
    switch (orderId) {
        case '1':
            // 待付款状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '待付款',
                paymentNumber: '',
                paymentTime: '',
                shippingCompany: '',
                trackingNumber: ''
            };
            break;
        case '2':
            // 待发货状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '待发货',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                shippingCompany: '',
                trackingNumber: ''
            };
            break;
        case '3':
            // 已收货状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '已收货',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                shippingCompany: '中通快递',
                trackingNumber: '32442353'
            };
            break;
        case '4':
            // 已完成状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '已完成',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                shippingCompany: '中通快递',
                trackingNumber: '32442353'
            };
            break;
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
        case '10':
            // 其他已完成状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '已完成',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                shippingCompany: '中通快递',
                trackingNumber: '32442353'
            };
            break;
        default:
            // 默认待付款状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '待付款',
                paymentNumber: '',
                paymentTime: '',
                shippingCompany: '',
                trackingNumber: ''
            };
    }
};
</script>

<style scoped>
.product-order-detail-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    border-radius: 8px;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
}

.detail-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-card {
    border-radius: 8px;
    padding: 30px;
}

/* 信息区域 */
.info-section {
    margin-bottom: 30px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.info-item h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    color: #666;
    font-size: 14px;
    min-width: 80px;
}

.value {
    color: #333;
    font-size: 14px;
}

/* 商品信息区域 */
.product-section {
    margin-bottom: 30px;
}

.product-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-summary {
    display: flex;
    gap: 30px;
}

.summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.item-image {
    flex-shrink: 0;
}

.product-icon {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
}

.product-placeholder {
    width: 30px;
    height: 30px;
    background-color: #ddd;
    border-radius: 2px;
}

.item-details {
    flex: 1;
}

.item-name {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.item-price, .item-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.payment-amount {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* 物流信息区域 */
.logistics-section {
    margin-bottom: 30px;
}

.logistics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.logistics-item h3, .recipient-item h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.logistics-content, .recipient-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logistics-row, .recipient-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.logistics-row .label, .recipient-row .label {
    min-width: 80px;
}

.logistics-row .value, .recipient-row .value {
    flex: 1;
    line-height: 1.5;
}

/* 无物流信息 */
.no-logistics {
    padding: 20px 0;
}

.no-info {
    color: #999;
    font-size: 14px;
}

/* 发货按钮区域 */
.ship-section {
    padding: 20px 0;
}

/* 弹窗样式 */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .product-order-detail-container {
        padding: 10px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .detail-card {
        padding: 20px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .logistics-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .product-summary {
        flex-direction: column;
        gap: 10px;
    }
    
    .product-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .payment-amount {
        justify-content: flex-start;
    }
}
</style>
